<label class="col-sm-2 control-label">{{'COMMON.FILTER_GROUP'|translate}}</label>
<div class="col-sm-10">
    <div dnd-list="filterGroups"
         dnd-allowed-types="['filterGroup']"
         class="form-control" style="min-height: 35px;height: auto;padding: 0px">
        <div class="dndPlaceholder sort-highlight"
             style="height: 24px; width: 93px;margin: 3px 3px;display: inline-block;vertical-align: middle;">
        </div>
        <div ng-repeat="o in filterGroups" dnd-draggable="o" dnd-effect-allowed="move"
             dnd-moved="filterGroups.splice($index, 1)" dnd-type="'filterGroup'"
             class="btn-group" style="cursor: move;margin: 3px 3px;">
            <button type="button" class="btn btn-warning btn-sm" >
                {{o.group}}
            </button>
            <button type="button"
                    class="btn btn-warning btn-sm dropdown-toggle"
                    ng-click="editFilterGroup(o)">
                <span class="fa fa-edit"></span>
            </button>
        </div>
    </div>
</div>